<template>
  <div v-show="isShow" class="studentModal modal" @click="closeModel">
    <div class="modal-content" @click.stop>
      <h3 class="modalTitle">{{ title }}</h3>
      <form class="studentForm" @submit.prevent="saveStuInfo">
        <input v-model="stuData.id" type="hidden" class="studentIdToEdit" />

        <label for="studentName">Name</label>
        <input v-model="stuData.name" type="text" name="name" class="studentName" required />

        <label for="studentGender">Gender</label>
        <select v-model="stuData.gender" name="gender" class="studentGender" required>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>

        <label for="studentHobbies">Hobbies</label>
        <input v-model="stuData.hobbies" type="text" name="hobbies" class="studentHobbies" required />

        <label for="studentEmail">Email</label>
        <input v-model="stuData.email" type="email" name="email" class="studentEmail" required />

        <label for="studentPhone">Phone</label>
        <input v-model="stuData.phone" type="text" name="phone" class="studentPhone" required />

        <label for="studentAge">Age</label>
        <input v-model="stuData.age" type="number" name="age" class="studentAge" required />

        <button type="submit" class="saveStudentBtn">保存信息</button>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import { uniqueId, cloneDeep } from 'lodash'
import { getNowDateTime } from '@/utils'

const props = defineProps<{
  isShow: boolean;
  title: string;
  student: any; // 这里可以使用具体的类型
  type: 'add'
}>();

const emit = defineEmits(['close', 'save']);

const stuData = ref(cloneDeep(props.student));

const saveStuInfo = () => {
  if (props.type === 'add') {
    stuData.value.id = uniqueId('newstu_');
    stuData.value.create_at = getNowDateTime();
    stuData.value.update_at = getNowDateTime();
  } else {
    stuData.value.update_at = getNowDateTime();
  }
  emit('save', { ...stuData.value });
  closeModel();
};

const closeModel = () => {
  emit('close');
};
</script>